import { Col, Row } from 'antd';
import React from 'react';
import css from './index.less';

const ToolbarItem = ({
  children,
  labelStyle,
  colon = true,
  label,
  ...rest
}) => {
  // if (!children) {
  //   return null;
  // }
  if (label) {
    return (
      <Col className={css.toolbarItem} {...rest}>
        <Row type="flex" gutter={7}>
          <Col className={css.toolbarItemLabel} style={labelStyle}>
            {label}
            {colon && ':'}
          </Col>
          <Col className={css.toolbarItemWrapper}>{children}</Col>
        </Row>
      </Col>
    );
  }
  return (
    <Col className={css.toolbarItem} {...rest}>
      {children}
    </Col>
  );
};

export default ToolbarItem;
